<template>
	<el-dialog v-model="props.show" width="500" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-#000000 font-bold text-18px">
				选择支付方式
			</div>
		</template>
		<template #default>
			<div>
				<template v-for="(item, index) in props.paymentList">
					<div class="flex items-center p-20px cursor-pointer border-1px rounded-10px 
					border-#114CEE"
					:class="{'border-solid': selected?.name == item.name}"
					@click="selectPayment(item)"
					>
						<p :style="{ backgroundColor: item.color }"
						class="w-4px h-14px"></p>
						<p class="ml-10px text-#000000 text-18px"> {{ item.name }}</p>
					</div>

				</template>
			</div>
		</template>
		<template #footer>
			<div>
				<el-button type="primary" color="#114CEE" @click="add" style="width: 100%;height:50px;font-size: 18px;">
					添加
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
interface IProps {
	show: boolean;
	paymentList: any[];
}

const props = defineProps<IProps>();
const emit = defineEmits(['close', 'add']);

const selected = ref<any>({
	name: '',
	color: ''
});

const selectPayment = (item: any) => {
	selected.value.name = item.name;
	selected.value.color = item.color;
}
const close = () => {
	emit('close', false);
}

const add = () => {
	if(selected.value.name == ''){
		emit('add', false);
	}else{
		emit('add', selected.value);
	}
}
</script>
<style lang="scss" scoped></style>
